<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    姓名： <input type="text" class="username" /><br>
    qq号：<input type="text" class="qq"  /><br>
    身份证号：<input type="text" class="id"  /><br>
    手机号：<input type="text" class="phone"  /><br>
    邮箱：<input type="text" class="email"  /><br>
    <div class="exchange"></div>

    <button>注册</button>
    <script>
        // 1.姓名 ： 必须是中文且 2-4位；
        // 2.qq号 ： 开头 1-9 中间 0-9   5-11 的数字；
        // 3.身份证号： 总位数 18位数字  最后一位可以是X
        // 4.手机号 ： 1开头  中间的数字（3456789） 总位数是11位；
        // 5.邮箱 ： 数字字母下划线 @ 数字字符下划线 （可以是3个字符（.com），也可以是 5个字符(.com.cn)）
        var usernameEle = document.querySelector(".username");
        var qqEle = document.querySelector(".qq");
        var idEle = document.querySelector(".id");
        var phoneEle = document.querySelector(".phone");
        var emailEle = document.querySelector(".email");
        var exchangeEle = document.querySelector(".exchange");
        var btn = document.querySelector("button");

        let checkObj = {
            username:false,
            qq:false,
            phone:false,
            id:false,
            email:false
        }


        // 用户名校验
        usernameEle.onblur = function(){
            var val = this.value;
            var reg = /^[\u4e00-\u9fa5]{2,4}$/g;
            if(reg.test(val)){
                exchangeEle.innerHTML = "用户名符合规则";
                checkObj.username = true;
            }else{
                exchangeEle.innerHTML = "用户名不符合规则";
                checkObj.username = false;
            }
        }
        // qq号校验
        qqEle.onblur = function(){
            var val = this.value;
            var reg = /^[1-9][0-9]{4,10}$/g;
            if(reg.test(val)){
                exchangeEle.innerHTML = "qq符合规则";
                checkObj.qq = true;
            }else{
                exchangeEle.innerHTML = "qq不符合规则";
                checkObj.qq = false;
            }
        }

        // 身份证校验
        idEle.onblur = function(){
            var val = this.value;
            var reg = /^\d{17}(\d|X)$/g;
            if(reg.test(val)){
                exchangeEle.innerHTML = "身份证符合规则";
                checkObj.id = true;
            }else{
                exchangeEle.innerHTML = "身份证不符合规则";
                checkObj.id = false;
            }
        }

        // 手机号
        phoneEle.onblur = function(){
            var val = this.value;
            var reg = /^1[3-9]\d{9}$/g;
            if(reg.test(val)){
                exchangeEle.innerHTML = "手机号符合规则";
                checkObj.phone = true;
            }else{
                exchangeEle.innerHTML = "手机号不符合规则";
                checkObj.phone = false;
            }
        }

        // 邮箱校验
        // 5.邮箱 ： 数字字母下划线 @ 数字字符下划线 （可以是3个字符（.com），也可以是 5个字符(.com.cn)）
        emailEle.onblur = function(){
            var val = this.value;
            // fdaf@qq.com
            var reg = /^\w+@\w+\.(([a-zA-Z]{3})|([a-zA-Z]{3}\.[a-zA-Z]{2}))$/g;
            if(reg.test(val)){
                exchangeEle.innerHTML = "邮箱符合规则";
                checkObj.email = true;
            }else{
                exchangeEle.innerHTML = "邮箱不符合规则";
                checkObj.email = false;
            }
        }

        btn.onclick = function(){
            var res = true;

            console.log(checkObj);
            for(let key in checkObj){
               res =  res && checkObj[key];
            }
            console.log(res);
            if(res){
                alert("可以注册，提交信息到后端")
            }else{
                alert("不能注册");
            }
        }
    </script>
</body>
</html>